vue
<template>
    <div
        class="px-4 pt-32"
        id="latestTransaction">
        <div>
            <div class="font-weight-bold text-[32px] text-center mb-8">
                最新 <span class="text-[#00D2FF]"> / </span> 交易
            </div>
        </div>
        <div
            class="transaction-list max-w-[1200px] mx-auto light-circle relative">
            <div class="px-4 py-4 tr-header md:px-12 font-weight-bold">
                <div class="el-row">
                    <div class="el-col el-col-9">
                        <div class="pr-1 break-all">接收地址</div>
                    </div>
                    <div class="el-col el-col-8"><div>兑换类型</div></div>
                    <div class="el-col el-col-7">
                        <div class="pl-2 md:px-0">接收数量</div>
                    </div>
                </div>
            </div>
            <div class="tr-list">
                <div v-for="(item,index) in tableData" :key="index">
                    <div class="px-4 py-4 text-sm tr-item md:px-12">
                        <div class="el-row">
                            <div class="el-col el-col-9">{{ item.name }}</div>
                            <div class="el-col el-col-8">{{ item.name }}</div>
                            <div class="el-col el-col-7">{{ item.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                {
                    date: "TWmeKY5C***Cw5R9mnd",
                    name: "TRX => Energy",
                    address: "33000 Energy",
                },
                {
                    date: "TWmeKY5C***Cw5R9mnd",
                    name: "TRX => Energy",
                    address: "33000 Energy",
                },
                {
                    date: "TWmeKY5C***Cw5R9mnd",
                    name: "TRX => Energy",
                    address: "33000 Energy",
                },
                {
                    date: "TWmeKY5C***Cw5R9mnd",
                    name: "TRX => Energy",
                    address: "33000 Energy",
                },
            ],
        };
    },
};
</script>

<style scoped>
.tr-list-row {
}
</style>
